import React from 'react';
import {
  Switch,
} from 'react-router-dom';
import { Layout } from 'antd';
import { Loading } from '~/services/loading/Loading';
import { routes } from '~/config/routes';
import { ProjectRoute } from '~/components/ProjectRoute';
import { SideMenu } from '~/components/SideMenu';
import { Header } from '~/components/Header';
import { ProjectBreadcrumb } from '~/components/ProjectBreadcrumb';

const { Content, Footer } = Layout;
// Switch 匹配一个path之后就停止匹配了（非精确匹配）
export const MainLayout = () => (<>
{/* SideMenu：左边的导航组件 */}
  <SideMenu / >

  <Layout>
    <Header />

    <Content className="ml-4 mr-4">
      <ProjectBreadcrumb />

      <div className="container-box overflow-hidden">
        <Switch>
          {routes.map((item) => <ProjectRoute key={item.id} {...item} />)}
        </Switch>
        <Loading />
      </div>
    </Content>

    <Footer className="text-center text-xs text-gray-500">福韵数据 技术支持</Footer>
  </Layout>
</>);
